<script setup lang="ts">
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { bid } from "@/api/bigModel";

// 添加 activeKey 的响应式变量
const activeKeys = ref(["1"]);

// 聊天记录
const chatMessages = ref<
  Array<{
    type: "user" | "ai";
    content: string;
    time: string;
  }>
>([]);

// 输入框内容
const chatInput = ref("");

// 常见问题提示
const commonQuestions = [
  {
    title: "缴费相关",
    questions: [
      "如何缴纳宿舍水电费？",
      "水电费缴纳周期是多久？",
      "忘记缴纳水电费会有什么后果？",
    ],
  },
  {
    title: "查询相关",
    questions: ["如何查看宿舍水电使用量？", "为什么本月水电费比上月多？"],
  },
  {
    title: "维修相关",
    questions: [
      "宿舍设施需要维修怎么办？",
      "报修后多久会来维修？",
      "维修需要收费吗？",
    ],
  },
  {
    title: "使用规范",
    questions: [
      "宿舍用电有功率限制吗？",
      "宿舍晚上会断电吗？",
      "宿舍用水有时间限制吗？",
    ],
  },
];

// 发送消息
const sendMessage = async (question?: string) => {
  const messageContent = question || chatInput.value.trim();
  if (!messageContent) return;

  console.log("发送问题：", messageContent);

  // 添加用户消息
  chatMessages.value.push({
    type: "user",
    content: messageContent,
    time: new Date().toLocaleTimeString(),
  });

  try {
    // 调用后端接口
    const res = await bid(messageContent);
    console.log("接口响应：", res);
    if (res.data.code === 0) {
      // 添加AI回复
      chatMessages.value.push({
        type: "ai",
        content: res.data.data,
        time: new Date().toLocaleTimeString(),
      });
    } else {
      message.error("获取回答失败");
    }
  } catch (error) {
    console.error("请求错误：", error);
    message.error("发送消息失败");
  }

  // 清空输入框
  chatInput.value = "";

  // 滚动到底部
  setTimeout(() => {
    const chatBox = document.querySelector(".chat-messages");
    if (chatBox) {
      chatBox.scrollTop = chatBox.scrollHeight;
    }
  }, 100);
};

// 点击常见问题
const handleQuestionClick = (question: string) => {
  sendMessage(question);
};

// 组件加载时添加欢迎消息
onMounted(() => {
  chatMessages.value.push({
    type: "ai",
    content: "您好！我是宿舍水电管理智能助手，请问有什么可以帮您？",
    time: new Date().toLocaleTimeString(),
  });
});
</script>

<template>
  <div class="ai-chat-container">
    <a-row :gutter="16">
      <!-- 左侧常见问题 -->
      <a-col :span="6">
        <a-card title="常见问题" class="question-card">
          <a-collapse v-model:activeKey="activeKeys">
            <a-collapse-panel
              v-for="(category, index) in commonQuestions"
              :key="index + 1"
              :header="category.title"
            >
              <a-list :dataSource="category.questions" size="small">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a @click="handleQuestionClick(item)" class="question-link">
                      {{ item }}
                    </a>
                  </a-list-item>
                </template>
              </a-list>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </a-col>

      <!-- 右侧聊天区域 -->
      <a-col :span="18">
        <a-card title="AI 智能助手" class="chat-card">
          <div class="chat-container">
            <div class="chat-messages">
              <div
                v-for="(msg, index) in chatMessages"
                :key="index"
                :class="['message', msg.type]"
              >
                <div class="message-content">{{ msg.content }}</div>
                <div class="message-time">{{ msg.time }}</div>
              </div>
            </div>
            <div class="chat-input">
              <a-input
                v-model:value="chatInput"
                placeholder="请输入您的问题，或点击左侧常见问题"
                @pressEnter="sendMessage()"
              >
                <template #suffix>
                  <a-button type="primary" @click="sendMessage()"
                    >发送</a-button
                  >
                </template>
              </a-input>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.ai-chat-container {
  padding: 24px;
}

.question-card {
  height: 100%;
  overflow-y: auto;
}

.question-link {
  color: #1890ff;
  cursor: pointer;
}

.question-link:hover {
  text-decoration: underline;
}

.chat-card {
  height: 100%;
}

.chat-container {
  height: 450px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 10px;
}

.message {
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
}

.message.user {
  background: #e6f7ff;
  margin-left: 20%;
}

.message.ai {
  background: #f5f5f5;
  margin-right: 20%;
}

.message-content {
  margin-bottom: 4px;
  line-height: 1.5;
}

.message-time {
  font-size: 12px;
  color: #999;
  text-align: right;
}

.chat-input {
  padding: 10px 0;
}
</style>
